<template>
 <nav>
     
        <v-snackbar v-model="snackbar" :timeout="4000" top color="success">
        {{ text }}
        <v-btn text color="white" @click="snackbar = false">close</v-btn>

        </v-snackbar>
   
     <v-app-bar app color="deep-dark accet-4" dense grey>
      <v-app-bar-nav-icon class="grey--text" @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>
           <v-img
          :src="require('../assets/m_logo.png')"
          contain
          width="150"
          height="40"
        />
      
      </v-toolbar-title>

      <v-spacer></v-spacer>

     <v-menu offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn text
          v-bind="attrs"
          v-on="on"
        >
         <v-icon left>expand_more</v-icon>
          Menu
        </v-btn>
      </template>

      <v-list>
        <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
          <v-icon left>{{link.icon}}</v-icon>
          <v-list-item-title>{{link.text}}</v-list-item-title>
        
        </v-list-item>
 
      </v-list>
    </v-menu>

      <v-btn text color="">
          <span>Sign Out</span>
          <v-icon right>exit_to_app</v-icon>
      </v-btn>
     </v-app-bar>
    <v-navigation-drawer app v-model="drawer" class="dark">
         <v-layout column align-center>
             <v-flex class="mt-5">
                 <v-avatar size="80">
                     <img src="../assets/avatars/avatar-m-21.png" alt="">
                 </v-avatar>
             </v-flex>
             <p class="text--white pt-2l" >Dave Davies</p>
         </v-layout>
         <v-flex class="mt-4 mb-3 text-center" >
             <Popup @projectAdded="snackbar = true" />
         </v-flex>
         <v-list >
             <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
                <v-list-item-action>
                    <v-icon>{{link.icon}}</v-icon>
                </v-list-item-action>
                
                <v-list-item-content>
                    <v-list-item-title>
                        {{link.text}}
                    </v-list-item-title>
                    
                </v-list-item-content>
            </v-list-item>
        </v-list>
    </v-navigation-drawer>
 </nav>
</template>

<script>
import Popup from './Popup'
export default {
    components: { Popup },
    data(){
        return{
            drawer:false,
            links: [
             {icon: "dashboard", text: "Dashboard", route:"/"},   
             {icon: "folder", text: "Project", route:"/projects"},   
             {icon: "person", text: "Team", route:"/team"},   
            ],
            snackbar: false,
            text: 'Added Successfully',
        }
    },
    methods:{
        method(){

        }
    }

}
</script>